import './phoneAndAddress.css'

export default function PhoneAndAddress ({
    phoneList,
    address
}) {
    return (
        <div className="text-xs">
            <div className="flex border-b border-gray-300 border-solid pb-2">
                <div className="flex-1 flex items-center">
                    <div>
                        <span>
                            手机号（
                        </span>
                        <span>
                            {`${Array.isArray(phoneList) ? phoneList.length : 0}`}
                        </span>
                        <span>
                            个）
                        </span>
                    </div>
                </div>
                <div className="flex-[2_2_0%] flex justify-between">
                    <div>
                        {(phoneList ?? []).map(({ tel }, index) => {
                                return (
                                    <span key={index} className="block my-1">{tel}</span>
                                )
                        })}
                    </div>
                    <div>
                        {(phoneList ?? []).map(({ dispute }, index) => {
                            return (
                                <span key={index} className="block my-1">{`涉及${dispute}条纠纷`}</span>
                            )
                        })}
                    </div>
                </div>
            </div>
            <div className="flex pt-2">
                <div className="flex-1 flex items-center">
                    <div>
                        <span>
                            地址（
                        </span>
                        <span>
                            {`2`}
                        </span>
                        <span>
                            个）
                        </span>
                    </div>
                </div>
                <div className="flex-[2_2_0%]">
                    <div className="address">
                        <span>户籍地: </span>
                        <span>{address?.placeOfRegion ?? '--'}</span>
                    </div>
                    <div className="mt-1 address">
                        <span>现住地: </span>
                        <span>{address?.residenceAddress ?? '--'}</span>
                    </div>
                </div>
            </div>
        </div>
    )
}